<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <title>文件传输系统</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .progress-container {
            width: 100%;
            height: 20px;
            background-color: #f0f0f0;
            border-radius: 10px;
            margin-top: 10px;
            display: none;
        }
        .progress-bar {
            height: 100%;
            background-color: #4CAF50;
            border-radius: 10px;
            width: 0%;
            transition: width 0.3s;
        }
        .progress-text {
            text-align: center;
            margin-top: 5px;
            font-size: 14px;
            color: #666;
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        .upload-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 2px dashed #ccc;
            border-radius: 5px;
            text-align: center;
        }
        .upload-section:hover {
            border-color: #007bff;
        }
        .file-input {
            display: none;
        }
        .upload-btn {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 10px;
        }
        .upload-btn:hover {
            background-color: #0069d9;
        }
        .file-list {
            width: 100%;
            border-collapse: collapse;
        }
        .file-list th, .file-list td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        .file-list th {
            background-color: #f8f9fa;
            font-weight: bold;
        }
        .file-list tr:hover {
            background-color: #f1f1f1;
        }
        .folder-icon {
            color: #ffc107;
            margin-right: 5px;
        }
        .file-icon {
            color: #6c757d;
            margin-right: 5px;
        }
        .breadcrumb {
            display: flex;
            flex-wrap: wrap;
            padding: 0.75rem 1rem;
            margin-bottom: 1rem;
            list-style: none;
            background-color: #e9ecef;
            border-radius: 0.25rem;
        }
        .breadcrumb-item {
            display: flex;
            align-items: center;
        }
        .breadcrumb-item + .breadcrumb-item {
            padding-left: 0.5rem;
        }
        .breadcrumb-item + .breadcrumb-item::before {
            display: inline-block;
            padding-right: 0.5rem;
            color: #6c757d;
            content: "/";
        }
        .breadcrumb-item a {
            color: #007bff;
            text-decoration: none;
        }
        .breadcrumb-item a:hover {
            text-decoration: underline;
        }
        .breadcrumb-item.active {
            color: #6c757d;
        }
        .folder-actions {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
        .action-btn {
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin-right: 5px;
        }
        .download-btn {
            background-color: #28a745;
            color: white;
        }
        .download-btn:hover {
            background-color: #218838;
        }
        .delete-btn {
            background-color: #dc3545;
            color: white;
        }
        .delete-btn:hover {
            background-color: #c82333;
        }
        .flash-messages {
            margin-bottom: 20px;
        }
        .flash-message {
            padding: 10px 15px;
            margin-bottom: 10px;
            border-radius: 4px;
        }
        .flash-success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .flash-error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .no-files {
            text-align: center;
            padding: 20px;
            color: #6c757d;
        }
        .file-drop-label {
            display: block;
            font-size: 16px;
            margin-bottom: 10px;
        }
        .file-name-display {
            margin-top: 10px;
            font-style: italic;
            color: #6c757d;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>文件传输系统</h1>
        
        <!-- 闪现消息 -->
        {% if get_flashed_messages() %}
        <div class="flash-messages">
            {% for category, message in get_flashed_messages(with_categories=true) %}
                <div class="flash-message flash-{{ category }}">{{ message }}</div>
            {% endfor %}
        </div>
        {% endif %}
        
        <!-- 导航路径 -->
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url_for('index') }}">根目录</a></li>
                {% for path in nav_paths %}
                    {% if loop.last %}
                        <li class="breadcrumb-item active">{{ path.name }}</li>
                    {% else %}
                        <li class="breadcrumb-item"><a href="{{ url_for('index', folder_path=path.path) }}">{{ path.name }}</a></li>
                    {% endif %}
                {% endfor %}
            </ol>
        </nav>
        
        <!-- 文件夹操作 -->
        <div class="folder-actions">
            {% if parent_path is not none %}
                <a href="{{ url_for('index', folder_path=parent_path) }}" class="action-btn download-btn">返回上级目录</a>
            {% endif %}
        </div>
        
        <!-- 上传部分 -->
        <div class="upload-section">
            <form action="{{ url_for('upload_file', folder_path=current_path) }}" method="post" enctype="multipart/form-data" id="upload-form" onsubmit="return validateForm()">                
                <label for="file-upload" class="file-drop-label">拖拽文件到此处或点击选择文件</label>
                <input type="file" name="file" id="file-upload" class="file-input" onchange="updateFileName(this)">
                <div id="file-name" class="file-name-display">未选择文件</div>
                <div class="progress-container" id="progress-container">
                    <div class="progress-bar" id="progress-bar"></div>
                </div>
                <div class="progress-text" id="progress-text"></div>
                <div class="error-message" id="error-message" style="color: red; margin-top: 10px;"></div>
                <button type="submit" class="upload-btn">上传文件</button>
            </form>
        </div>
        
        <!-- 文件和文件夹列表 -->
        <h2>文件列表</h2>
        {% if items %}
        <table class="file-list">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>类型/大小</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for item in items %}
                <tr>
                    <td>
                        {% if item.is_file %}
                            <span class="file-icon">📄</span>
                            {{ item.name }}
                        {% else %}
                            <span class="folder-icon">📁</span>
                            <a href="{{ item.path }}" style="text-decoration: none; color: inherit;">{{ item.name }}</a>
                        {% endif %}
                    </td>
                    <td>{{ item.size }}</td>
                    <td>
                        {% if item.is_file %}
                            <a href="{{ item.path }}" class="action-btn download-btn">下载</a>
                            <form action="{{ url_for('delete_file', folder_path=current_path, filename=item.name) }}" method="post" style="display: inline;">
                                <button type="submit" class="action-btn delete-btn" onclick="return confirm('确定要删除这个文件吗？');">删除</button>
                            </form>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="no-files">当前目录为空</div>
        {% endif %}
    </div>

    <script>
        // 显示选择的文件名
        function updateFileName(input) {
            const fileNameDisplay = document.getElementById('file-name');
            if (input.files.length > 0) {
                fileNameDisplay.textContent = '已选择: ' + input.files[0].name;
            } else {
                fileNameDisplay.textContent = '未选择文件';
            }
        }

        // 拖放文件上传
        function uploadFile(file) {
            const formData = new FormData();
            formData.append('file', file);

            const xhr = new XMLHttpRequest();
            const progressBar = document.getElementById('progress-bar');
            const progressText = document.getElementById('progress-text');
            const progressContainer = document.getElementById('progress-container');
            const errorMessage = document.getElementById('error-message');

            // 重置错误信息
            errorMessage.textContent = '';

            // 显示进度条
            progressContainer.style.display = 'block';
            progressBar.style.width = '0%';
            progressText.textContent = '0%';

            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    const percentComplete = (e.loaded / e.total) * 100;
                    progressBar.style.width = percentComplete + '%';
                    progressText.textContent = Math.round(percentComplete) + '%';
                }
            };

            xhr.onload = function() {
                try {
                    const response = JSON.parse(xhr.responseText);
                    if (xhr.status === 200) {
                        // 上传成功
                        progressText.textContent = '上传成功！';
                        progressBar.style.backgroundColor = '#4CAF50';
                        setTimeout(() => {
                            progressContainer.style.display = 'none';
                            location.reload();
                        }, 1000);
                    } else {
                        // 显示具体错误信息
                        progressText.textContent = '上传失败';
                        progressBar.style.backgroundColor = '#f44336';
                        errorMessage.textContent = response.message || '上传失败，请重试';
                    }
                } catch (e) {
                    progressText.textContent = '上传失败';
                    progressBar.style.backgroundColor = '#f44336';
                    errorMessage.textContent = '服务器响应格式错误';
                }
            };

            xhr.onerror = function() {
                progressText.textContent = '上传失败';
                progressBar.style.backgroundColor = '#f44336';
                errorMessage.textContent = '网络错误，请检查网络连接';
            };

            // 处理特定的HTTP状态码
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    switch(xhr.status) {
                        case 413:
                            errorMessage.textContent = '文件大小超过限制（最大50MB）';
                            break;
                        case 500:
                            errorMessage.textContent = '服务器内部错误';
                            break;
                        case 403:
                            errorMessage.textContent = '没有权限上传文件';
                            break;
                    }
                }
            };

            // 构建正确的上传URL路径
            let uploadUrl = '/upload';
            if (window.location.pathname !== '/') {
                // 从当前路径中提取文件夹路径
                uploadUrl = '/upload' + window.location.pathname;
            }
            xhr.open('POST', uploadUrl, true);
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xhr.send(formData);
        }

        // 获取拖放区域元素
        const dropZone = document.querySelector('.upload-section');
        const fileInput = document.getElementById('file-upload');

        dropZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropZone.style.borderColor = '#007bff';
        });

        dropZone.addEventListener('dragleave', () => {
            dropZone.style.borderColor = '#ccc';
        });

        dropZone.addEventListener('drop', (e) => {
            e.preventDefault();
            dropZone.style.borderColor = '#ccc';
            
            if (e.dataTransfer.files.length) {
                const file = e.dataTransfer.files[0];
                uploadFile(file);
                updateFileName({ files: [file] });
            }
        });

        // 点击上传区域（但不是按钮）触发文件选择
        dropZone.addEventListener('click', (e) => {
            // 如果点击的不是按钮，才触发文件选择
            if (e.target.tagName !== 'BUTTON') {
                fileInput.click();
            }
        });

        // 监听文件选择变化
        fileInput.addEventListener('change', function(e) {
            if (this.files.length > 0) {
                uploadFile(this.files[0]);
            }
        });
        
        // 表单验证函数
        function validateForm() {
            const fileInput = document.getElementById('file-upload');
            const errorMessage = document.getElementById('error-message');
            
            if (fileInput.files.length === 0) {
                errorMessage.textContent = '请选择要上传的文件';
                return false;
            }
            return true;
        }
    </script>
</body>
</html>